<template>
	<div class="con">
		<div class="readme">
			<highlightjs language='javascript' :code="md_value" />

			<!-- <div v-html="md_value"></div> -->
		</div>
	</div>
</template>
<script>
export default {
  name: 'loadmd',
  data(){
	  return{
			md_value:'console.log("1")' ,
	  }
  },
	async mounted() {
		// try {
		// 	var name = this.$route.params.name
		// 	if(name=='readme'){
		// 		this.md_value = require(`../../README.md`)
		// 	}else{
		// 		this.md_value = require(`../assets/data/md-data/${name}.md`)
		// 	}
		// } catch(err) {
		// 	this.$router.push({path:'/others'})
		// }
		
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.con{
		height: 100%;
	}
	.readme{
		width: 100%;
		margin: 0px auto;
		border-left: 1px solid #FFFFFF;
		border-right: 1px solid #FFFFFF;
		height: 100%;
		padding: 10px 20px;
		box-sizing: border-box;
	}
	
	.readme article code{
		background: forestgreen !important;
		padding: 20px;
	}

</style>
